
// import { Component } from "react"


// class DemoA extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }
//   render() {
//     let { flag } = this.state;

//     return (
//       <div>
//         <h2>类组件</h2>
//         {/* 类似于vue中的v-if */}
//         {flag && <h2>我是一个h2标签</h2>}
//         <button onClick={() => this.setState(_ => ({flag:!_.flag}))}>显示/隐藏</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ---------------------------------------------------------

// import { Component } from "react"


// class DemoA extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }
//   render() {
//     let { flag } = this.state;

//     return (
//       <div>
//         <h2>类组件</h2>
//         {/* 类似于vue中的v-if */}
//         {flag && (
//           <div>
//             <h2>我是一个h2标签</h2>
//             <h2>我是一个h2标签</h2>
//             <h2>我是一个h2标签</h2>
//             <h2>我是一个h2标签</h2>
//           </div>
//         )}
//         <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>显示/隐藏</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// ----------------------------------------------------

// import { Component } from "react"


// class DemoA extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       flag: true
//     }
//   }
//   render() {
//     let { flag } = this.state;

//     return (
//       <div>
//         <h2>类组件</h2>
//         {/* 类似于vue中的v-if v-else */}
//         {flag ? <h2>h2</h2> : <h3>h3</h3>}
//         <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>显示/隐藏</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// -------------------------------------------------

// import { Component } from "react"


// class DemoA extends Component {
//   constructor(props) {
//     super(props)
//     this.state = {
//       num: 0
//     }
//   }
//   // 自己封装一个渲染函数
//   // vue中的 v-if v-elseif v-elseif v-else
//   renderHn() {
//     let { num } = this.state;
//     let res = null;
//     if (num === 1) res = <h1>H1</h1>
//     if (num === 2) res = <h2>H2</h2>
//     if (num === 3) res = <h3>H3</h3>
//     if (num === 4) res = <h4>H4</h4>
//     if (num === 5) res = <h5>H5</h5>
//     if (num === 6) res = <h6>H6</h6>

//     // jsx可以传递给某个函数，也可以作为函数的返回值
//     // jsx本质是一个不可变的对象，因为jsx最终要变成真实DOM
//     return res;
//   }
//   render() {
//     let { flag } = this.state;

//     return (
//       <div>
//         <h2>类组件</h2>
//         {this.renderHn()}
//         <button onClick={() => this.setState(_ => ({ num: (_.num+1)%7 }))}>改变num</button>
//       </div>
//     )
//   }
// }

// export default DemoA;

// -------------------------------------------------------------------------

import { Component } from "react"


class DemoA extends Component {
  constructor(props) {
    super(props)
    this.state = {
      flag: true
    }
  }
  render() {
    let { flag } = this.state;

    return (
      <div>
        <h2>类组件</h2>
        {/* 类似于vue中的v-show */}
        <h2 style={{ display: (flag ? 'block' : 'none') }}>测试一下</h2>
        <button onClick={() => this.setState(_ => ({ flag: !_.flag }))}>改变flag</button>
      </div>
    )
  }
}

export default DemoA;

